<template>
	<div class="card" :class="{ 'add-card': isAdd }">
		<div class="add" v-if="isAdd" @click="handleAdd">
			<span>+</span>
			<span>快速创建智能体</span>
			<!-- <dianJi class="dianji" width="1.67rem" height="1.83rem" /> -->
		</div>
		<div v-else>
			<div class="card-body">
				<div class="left">
					<img :src="item.icon && item.icon !== '' ? item.icon : defaultIcon" />
				</div>
				<div class="right">
					<div class="title">{{ item.name }}</div>
					<Tooltip :transfer="true" max-width="200" :content="item.opening">
						<div class="desc">
							{{ item.opening }}
						</div>
					</Tooltip>
				</div>
			</div>
			<div class="card-footer" @click="handleUse">
				<!-- <div class="hot">
					<Huo width="1rem" height="1rem" />
					<span>375</span>
				</div>
				<div class="dot">|</div> -->
				<div class="action">
					<a>使用</a>
				</div>
			</div>
			<div class="btn-action" v-if="!isAdd && item.type === 2">
				<div class="btn-pic" @click="editClick">
					<Edit width="1.33rem" height="1.33rem"></Edit>
				</div>
				<div class="btn-pic" @click="deleteClick">
					<Delete width="2.33rem" height="2.33rem"></Delete>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import Delete from '@/components/svg/v1/delete.vue'
import Edit from '@/components/svg/v1/edit.vue'
import { defaultIcon } from './default-icon'
export default {
	components: {
		Delete,
		Edit
	},
	props: {
		isAdd: {
			type: Boolean,
			default: false
		},
		item: {
			type: Object,
			default: () => {
				return {
					id: '',
					name: '我的智能体',
					icon: '',
					opening: '这里是我的智能体'
				}
			}
		}
	},
	data() {
		return {
			defaultIcon: defaultIcon
		}
	},
	methods: {
		handleUse() {
			this.$emit('use', this.item)
		},
		handleAdd() {
			this.$emit('add')
		},
		// getComputedBase64(icon) {
		// 	return `data:image/png;base64,${icon}`
		// },
		editClick() {
			this.$emit('edit', this.item)
		},
		deleteClick() {
			this.$Modal.confirm({
				title: '警告',
				content: `确认删除(${this.item.name})智能体`,
				onOk: () => {
					this.$emit('delete', this.item)
				}
			})
		}
	}
}
</script>
<style lang="less" scoped>
.card {
	background: var(--card-bg-color);
	border: 0.08rem solid var(--card-border-color);
	box-shadow: var(--card-border-shadow);
	border-radius: 1rem;
	// height: 12rem;
	cursor: url('../../../assets/images/v-dianji.svg'), auto;
	&:hover {
		border: 0.08rem solid rgba(248, 108, 2, 0.5);
		// .card-footer {
		// 	border-bottom: 0.08rem dashed rgba(248, 108, 2, 1);
		// 	border-left: 0.08rem dashed rgba(248, 108, 2, 1);
		// 	border-right: 0.08rem dashed rgba(248, 108, 2, 1);
		// }
	}
	.add {
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: url('../../../assets/images/v-dianji.svg'), auto;
		height: inherit;
		span {
			font-family: PingFangSC-Semibold;
			font-size: 1.17rem;
			color: #f86c02;
			line-height: 2rem;
			font-weight: 600;
			margin-right: 0.4rem;
		}
		// .dianji {
		// 	position: absolute;
		// 	right: 4rem;
		// 	top: 5.31rem;
		// }
	}
	.card-body {
		padding: 1.57rem 0.83rem 1.07rem 1.47rem;
		display: flex;
		.left {
			margin-right: 0.53rem;
			img {
				width: 2.94rem;
				height: 2.95rem;
				border-radius: 1.47rem;
			}
		}
		.right {
			.title {
				font-family: PingFangSC-Semibold;
				font-size: 1.33rem;
				color: var(--setting-text-title-color);
				letter-spacing: 0;
				text-align: left;
				line-height: 2rem;
				font-weight: 600;
			}
			.desc {
				font-family: PingFangSC-Regular;
				font-size: 1.17rem;
				color: var(--setting-text-color);
				letter-spacing: 0;
				text-align: left;
				line-height: 2rem;
				height: 3.5rem;
				font-weight: 400;
				overflow: hidden; /* 隐藏超出容器高度的部分文字 */
				text-overflow: ellipsis; /* 显示省略号 */
				display: -webkit-box; /* 使用旧版Webkit内核的浏览器，需要结合-webkit-line-clamp属性使用 */
				-webkit-line-clamp: 2; /* 限制显示行数为2行 */
				-webkit-box-orient: vertical; /* 设置显示的文本为垂直方向 */
			}
		}
	}
	.card-footer {
		padding: 0.58rem 1.28rem 0.58rem 2.24rem;
		display: flex;
		justify-content: center;
		background-color: var(--card-footer-bg-color);
		// border: 0.08rem solid var(--card-border-color);
		// border-top: none;
		border-radius: 0 0 1rem 1rem;
		.hot {
			span {
				margin-right: 0.2rem;
			}
			span:last-child {
				font-family: PingFangSC-Regular;
				font-size: 1.17rem;
				color: #333333;
				letter-spacing: 0;
				text-align: left;
				font-weight: 400;
			}
		}
		.dot {
			background: #e8e8e8;
		}
		.action {
			a {
				font-family: PingFangSC-Regular;
				font-size: 1.17rem;
				color: #f86c02;
				line-height: 2rem;
				font-weight: 600;
				cursor: pointer;
			}
		}
	}
}
.add-card {
	border: 0.06rem dashed var(--add-card-border-color, rgba(234, 234, 234, 1));
}
.btn-action {
	background: var(--btn-action-bg-color, #ffffff);
	box-shadow: 0 0 0.42rem 0 var(--card-btn-border-shadow, rgba(175, 175, 175, 0.61));
	border-radius: 1rem;
	padding: 0.83rem;
	display: flex;
	flex-direction: row;
	position: absolute;
	bottom: -2rem;
	right: 0;
	display: none;
	z-index: 99;
	/deep/.fill-color {
		fill: var(--btn-action-svg-color, #000);
	}
	.btn-pic {
		// padding: 0.5rem;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2.5rem;
		height: 2.5rem;
		&:hover {
			// background: var(--btn-action-hover-color, #cbc7c9);
			border-radius: 0.83rem;
			/deep/.fill-color {
				fill: var(--btn-action-svg-hover-color, #333333);
			}
		}
	}
}
.card:hover .btn-action {
	display: flex;
}
</style>
